<template>
  <div class="sosuo">
    <div class="top">
      <i class="iconfont icon-zuojiantou" @click="go()"></i>
      <i class="iconfont icon-guanbi" @click="close()"></i>
    </div>
    <play/>
    <div class="sss" v-for="(v, i) in arr" :key="i" @click="toDetials()">
      <img :src="v.songimg" alt="" />
      <div class="right">
        <p>{{ v.songid }}</p>
        <p>{{ v.songtitle }}</p>
        <p>{{ v.author }}</p>
        <audio :src="v.songurl"></audio>
      </div>
    </div>
  </div>
</template>
<script>
import play from "../../components/myt/play.vue";
export default {
  components: { play },
  data() {
    return {
      arr: [],
    };
  },
  created() {
    this.arr = this.$route.query.obj;
    console.log(this.$route.query.obj);
  },
  methods:{
    close(){
      this.$router.push("/rcebianlan")
    },
    go(){
      this.$router.push("/rcebianlan")
    },
    toDetials(){
       this.$router.push("/dl")
    }
  }
};
</script>
<style scoped>
.top {
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.2rem;
  margin-left: 0.2rem;
}
i {
  font-size: 0.6rem;
  /* color: #626262; */
  color: white;
  opacity: 0.3;
}
.sosuo {
  /* background-color: #f4f4f4; */
  background: linear-gradient(
    to bottom,
    #2d2d2d 20%,
    #393939 40%,
    #434544 50%,
    #434049 70%,
    #3e3f53 80%,
    #2d3653 90%
  );
}
.sss {
  height: 2rem;
  margin: 0 0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
    border:1px solid black;
    border-radius: 0.3rem;
}
p {
  color:black;
  font-size: 0.25rem;
  text-align: center;
  margin-left:0.5rem;
  }
img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}
.right{
  display: flex;
}
</style>